import { utilityGetDate, utilityGetTime } from "../../../../../utils";

import classes from "./RequestMessage.module.scss";
import AvatarItem from "./avatarItem/AvatarItem";
import MessageContentItem from "./messageContentItem/MessageContentItem";

const RequestMessage = ({ data, index }) => {
  return (
    <div className={classes["request-message"]}>
      <div className={`${classes["request-message-header"]} pb-15`}>
        <AvatarItem
          lastName={data?.lastName}
          firstName={data?.firstName}
          middleName={data?.middleName}
          role={data?.uploaderRole}
        />
        <span
          className={`${classes["message-date"]} span-styles`}
        >{`${utilityGetDate(data?.creationTimeUtc)}, ${utilityGetTime(
          data?.creationTimeUtc
        ).slice(0, 5)}`}</span>
      </div>

      <div className={`pt-10 pb-10`}>
        <span className="span-styles">{data?.text}</span>
        {data?.documents?.map((item, idx) => (
          <MessageContentItem
            item={item}
            key={idx}
            indexDocument={idx}
            indexMessage={index}
            uploaderRole={data?.uploaderRole}
          />
        ))}
      </div>
    </div>
  );
};

export default RequestMessage;